<template>
  <view>
    <template v-if="count">
      <view v-for="(item, index) in list" v-if="index < count">
        <view class="u-flex u-p-l-30 u-p-r-30 u-p-b-24" style="align-items: flex-start">
          <img :src="item && item.compassNormalUser.avatar" class="avatar u-m-r-20"></img>
          <view class="u-flex-col u-row-between flex-1">
            <view class="u-flex u-row-between u-font-28">
              <view style="color: #040404" class="font-b u-p-b-12">
                {{item.userName}}
              </view>
              <view @click="liskEva(item, index)" class="flex-center u-flex">
                <u-icon :name="item.likeFlag ? require('../static/icon/liked.png') : require('../static/icon/like.png')" size="36" class="u-m-r-10"></u-icon>
                <span :class="{'color-active': item.likeFlag }">{{item.likeNum ? item.likeNum : '点赞'}}</span>
              </view>
            </view>
            <view>
              <view>{{item.evaDesc}}</view>
              <view class="replalydesc" v-if="item.replayDesc">
                <view class="font-b u-m-b-8">指北星</view>
                {{item.replayDesc}}
              </view>
            </view>
          </view>
        </view>
        <view class="u-border-bottom u-m-b-24" v-if="border"></view>
      </view>
    </template>
    <template v-else>
      <view v-for="(item, index) in list" >
        <view class="u-flex u-p-l-30 u-p-r-30 u-p-b-24" style="align-items: flex-start;">
          <img :src="item && item.compassNormalUser.avatar" class="avatar u-m-r-20"></img>
          <view class="u-flex-col u-row-between flex-1">
            <view class="u-flex u-row-between u-font-28">
              <view style="color: #040404" class="font-b u-p-b-12">
                {{ item.userName}}
              </view>
              <view @click="liskEva(item, index)" class="u-flex flex-center">
                <u-icon :name="item.likeFlag ? require('../static/icon/liked.png') : require('../static/icon/like.png')" size="36" class="u-m-r-10"></u-icon>
                <span :class="{'color-active': item.likeFlag }">{{item.likeNum ? item.likeNum : '点赞'}}</span>
              </view>
            </view>
            <view>
              <view>{{item.evaDesc}}</view>
              <view class="replalydesc" v-if="item.replayDesc">
                <view class="font-b u-m-b-8">指北星</view>
                {{item.replayDesc}}
              </view>
            </view>
          </view>
        </view>
        <view class="u-border-bottom u-m-b-24" v-if="border"></view>
      </view>
    </template>
  </view>
</template>

<script>
import {request} from "../util/api";
import {THEME} from "../pages/mixins/config";

export default {
  name: "evaList",

  props: {
    list: Array,
    border: Boolean,
    count: Number,
    type: ''
  },

  data() {
    return {
      config: THEME
    }
  },

  methods: {
    liskEva(item, index) {
      request({
        url: `/system/CompassLikeLog/system/wx/updateLikeLog/${item.id}/${this.type == 'goods' ? '3' : '2'}`
      }).then(res => {
        this.list[index].likeFlag = !this.list[index].likeFlag
        if (res.msg == '点赞成功') {
          this.list[index].likeNum++
        } else {
          this.list[index].likeNum--
        }
        this.$emit('likeChange', this.list)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.avatar {
  width: 70upx;
  height: 70upx;
  border-radius: 70upx;
}
.replalydesc {
  border-radius: 5px;
  background-color: rgba(240, 240, 240, 100);
  padding: 22upx 26upx;
  color: rgb(96, 96, 96);
  font-size: 28upx;
  margin-top: 20upx;
}
</style>
